.pic-item { width: 45%; margin: 10px 5px; padding-top: 5px; background: #f7f7f8;}
.pic-box {
    width:90%; height: auto; margin: 0 auto;}
.pic-box img {
    width:100%; height:100%;}
.pic_info { width: 90%; height: auto; margin: 5px auto;}
.pic_info h3 { color: #666;}
.pic_info p { width: 100%; height: 30px; line-height: 30px;}
.op { width: 90%; height: 40px; margin: 0 auto;}
.op span { display: inline-block; width: auto; padding: 0 5px; height: 30px; line-height: 30px;}
.op span b { display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: url("../css/view.png") center 0 no-repeat;}
.op span b.view { background: url("../css/view.png") center 0 no-repeat;}
.op span b.drop { background: url("../css/drop.png") center 0 no-repeat;}

.categray { width: 95%; height: auto; margin: 10px auto; padding-bottom: 15px; border-bottom: 1px solid #f3f2f2;}
.item_icon { width: 25px; height:80px; float: left; background: url("./cate.png") 0 2px no-repeat;}
.item_list a { width: auto; height: 30px; line-height: 30px; padding: 0 10px; color: #666;}
.container { width: 100%; height: auto; margin-top: 10px;}
.con-title { width: 95%; height: 30px; font-size: 15px; padding-left: 25px; background: url("./music.png") 5px 0 no-repeat;}
.item-nav { float: right; width: auto; margin-right: 10px;}
.con-list { width: 99%; height: auto; padding-left: 1%;}
.list-item { display: inline-block; width: 48%; height: 180px;}
.cover-box { width: 100%; height: 130px;}
.cover-box img { float: left; width: 100%; height: 100%;}
.brice { width: 60px; height: 60px; border-radius: 30px; background: url('./music.png') center center no-repeat rgba(0,0,0,.5); position: absolute; left: 0; top: 60px;}
.m-play-box { width: 100%; height: 80px; background: rgba(0,0,0,.8); position: absolute; left: 0; bottom: 0;}
.m-play-cover { display: inline-block; vertical-align: middle; width: 60px; height: 60px; border-radius: 30px; overflow: hidden; margin: 10px 10px;}
.m-play-cover img { display: inline-block; width: 100%; height: 100%;}
.m_play-status { display: inline-block; vertical-align: middle; height: 60px; position: relative;}
.m_play-status h3 { color: #fff; }
.op1 { display: inline-block; width: 20px; height: 20px; margin-left: 10px;}
.drop { background: url("./drop1.png")}
.progress_bar { width: 250px; height: 1px; margin-top: 10px;}
.progress_bar p { width: 50%; height: 1px;  background: #2ac845;}
.time { width: auto; height: 20px;position: absolute; right: 0; top: 10px; color: #fff;}
.title_play { width: 95%; height: auto; height: 30px; margin: 0 auto;}
.v-play-box { width: 100%; max-height: 500px; height: auto; background: #000; overflow: hidden; position: relative; t}
.v-play-box video { width: 100%; height: auto;}
.control_box { width: 100%; height: 50px; position: absolute; left: 0; bottom: -50px;ransition: 1s;
    -moz-transition: 1s; /* Firefox 4 */
    -webkit-transition: 1s; /* Safari 和 Chrome */
    -o-transition: 1s; /* Opera */ background: rgba(0,0,0,.5)
}
.play_control-btn { display: inline-block; width: 40px; height: 40px;margin-left: 5px; margin-top: 5px;}
.play { background: url("./play.png") center center no-repeat;}
.paused { background: url("./pause.png") center center no-repeat;}
.v-progress_bar { width: 100%;height: 1px; position: absolute; left: 0; top: 0; }
.v-progress_bar p { width: 10%; height: 1px; background: #ff6666;}
.v_time { float: right; height: 50px; line-height: 50px; margin-right: 15px; color: #fff;}
.v-op { width: 100%; height: 40px; border-top: 1px solid #f6f6f6; margin-top: 5px;padding-top: 5px;}
.v-op span { display: inline-block; width: auto; padding: 0 4px; font-size: 13px; color: #666;}
.v-op span b { display: inline-block; vertical-align: middle; width: 20px; height: 20px;}
.v-op span b.view { background: url("../css/view.png") center 0 no-repeat;}
.v-op span b.drop { background: url("../css/drop.png") center 0 no-repeat;}
.v-op span b.coment { background: url("../css/coment.png") center 0 no-repeat;}
.edit { width: auto; height: 30px; line-height: 30px; float: right; background: url("./edit.png") 1px no-repeat; padding-left: 20px;}
.add-comment { background: #f7f7f9; position: absolute; bottom: 0px; width: 100%; height: 40px;}
.comment_input { display: inline-block; width: 85%; height: 25px; margin-top: 7px; margin-left: 10px; background: #fff;  border: 1px solid #ccc;}
.comment_input input { width: 250px; height: 25px; border: none; padding-left: 10px;}
.comment_sub { display: inline-block; vertical-align: middle; width: 25px; height: 40px; background: url("./sub.png") 0 center no-repeat;}
.nav-item { width: 30px; height:25px; background: url("./nav-item.png"); position: absolute; right: -30px; top: 10px;}
.nav-item-box { width: auto; height: 25px; border-radius: 4px; position: absolute; right: 10px; top: 10px;}










